<template>
	<u-popup mode="bottom" v-model="show" @close="close" @touchmove.stop>
		<view class="content">
			<view class="row between p-top-c b-b">
				<view class="row" @tap="clearCart">
					<u-icon name="/static/img/qingkong.png" size="26"></u-icon>
					<text style="margin-left: 20rpx;">清空</text>
				</view>
				<view class="p-top-t">洗衣袋</view>
				<u-icon name="close-circle" size="38" color="#999999" @tap="close"></u-icon>
			</view>
			<scroll-view class="scroll-view-p" scroll-y="true" style="height:600rpx;">
				<view>
					<view class="cart-con" style="width: 100%;" v-if="dataList.length != 0">
						<view class="cart-item-con row between" v-for="(item, index) in dataList" :key="index">
							<view class="row">
								<view class="cart-item-icon" @tap="onItemClickIcon(item)">
									<u-icon name="checkmark-circle-fill" color="#2781a7" size="38" v-if="item.checked"></u-icon>
									<u-icon name="checkmark-circle-fill" v-else size="38" color="#999999"></u-icon>
								</view>
								<view class="cart-item-img"><image :src="item.icon" mode="aspectFill" class="img"></image></view>
								<view class="clamp cart-item-title">{{ item.name }}</view>
							</view>
							<view class="item-price">{{ item.price }}</view>
							<mix-number-box :min="0" :value="item.count" ref="mixNumberBox" :parentId="item.id" :index="index" @change="changeCartNum"></mix-number-box>
						</view>
					</view>
					<view class="" style="margin-top: 80upx;" v-else><u-empty text="暂无数据" mode="favor"></u-empty></view>
				</view>
			</scroll-view>
			<view class="row between p-bottom-c">
				<view class="row">
					<view style="position: relative;">
						<image src="/static/img/gouwuche.png" mode="" class="left-i"></image>
						<view class="left-num clamp">{{ totalnum }}</view>
					</view>
					<view class="item-price" v-if="totalprice != 0">{{ totalprice }}</view>
				</view>

				<view class="right-btn" hover-class="hover-opacity" @tap="canCreatOrder">立即下单</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import mixNumberBox from '@/components/mix-number-box/mix-number-box.vue';
export default {
	components: {
		mixNumberBox
	},
	data() {
		return {
			show: false,
			totalprice: 0,
			totalnum: 0,
			dataList: []
		};
	},
	watch: {
		dataList: {
			handler(newval) {
				if (newval.length != 0) {
					let price = 0,
						count = 0;
					newval.forEach(item => {
						if (item.checked) {
							price += (item.price * 100 * item.count) / 100;
							count += item.count - 0;
						}
					});
					this.totalprice = price.toFixed(2);
					this.totalnum = count;
				} else {
					this.totalprice = 0;
					this.totalnum = 0;
				}
				const pages = getCurrentPages();
				const prePage = pages[pages.length - 1];
				if (prePage.route == 'pages/tabs/groList') {
					let obj = {
						totalprice: this.totalprice,
						totalnum: this.totalnum
					};
					uni.$emit('change', obj);
				}
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		open() {
			this.getCartData(0);
		},
		onItemClickIcon(v) {
			v.checked = !v.checked;
		},
		changeCartNum(e) {
			console.log(e);
			let index=e.index;
			this.dataList[index].count = e.number;
			if(e.number==0){
				this.dataList.splice(index,1);
			}
			if(this.dataList.length==0){
				this.show=false;
			}
		},
		close() {
			this.show = false;
			// uni.showTabBar();
		},
		async clearCart() {
			const res = await this.$request('goods/clean-wash-bag', {uid:uni.getStorageSync('uid')});
			if (res.result == 0) {
				this.dataList = [];
				this.show=false;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async getCartData(type) {
			const res = await this.$request('goods/wash-bag', { uid: uni.getStorageSync('uid') }, { login: true });
			if (res) {
				if (res.result == 0) {
					if (res.dataList || res.dataList.length != 0) {
						res.dataList.forEach(item => {
							item.checked = true;
						});
						this.dataList = res.dataList;
						if(type==0){
							this.show = true;
						}
					}
				} else {
					this.$util.msg(res.resultNote);
				}
			}
		},
		canCreatOrder() {
			let array = this.dataList.filter(item => {
				return item.checked;
			});
			console.log(array);
			if (array.length != 0) {
				array.forEach(item => {
					item.newImage="";
					item.isSupport = 0;
					item.isPack = 0;
					item.supportFee = 0;
					item.packFee = 0;
					item.value = '';
					item.washCost = 0;
				});
				let cartInfo = {
					cartList: array,
					totalNum: this.totalnum
				};
				getApp().globalData.cartInfo = cartInfo;
				this.navTo('/pages/order/creatOrder');
				this.show=false;
			} else {
				this.$util.msg('请先选择要下单的衣物!');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	position: relative;
}
.p-top-c {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100upx;
	background: #ffffff;
	padding: 0 20upx;
}
.p-top-t {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
}
.scroll-view-p {
	padding: 100upx 20upx 0 20upx;
}
.p-bottom-c {
	height: 100upx;
	padding: 0 20upx;
	width: 100%;
	border-top: 1px solid #f6f6f6;
}
.left-i {
	width: 62rpx;
	height: 62rpx;
	border-radius: 50%;
}
.left-num {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	background: #cb1414;
	color: #ffffff;
	font-size: 22rpx;
	border-radius: 50%;
	width: 30rpx;
	height: 30rpx;
	line-height: 30rpx;
	text-align: center;
}
.right-btn {
	border-radius: 33rpx;
	width: 220rpx;
	height: 66rpx;
	text-align: center;
	line-height: 66rpx;
	color: #ffffff;
	font-size: 26rpx;
	background: #2781a7;
}

/* 购物车 部分 */
.cart-item-con {
	padding: 10upx 0;
}
.cart-item-img {
	width: 81upx;
	height: 81upx;
	border-radius: 10upx;
	overflow: hidden;
	margin: 0 30upx;
	position: relative;
}
.img {
	width: 81upx;
	height: 81upx;
}
.cart-item-right {
	width: 100%;
	height: 81upx;
	position: relative;
}
.cart-item-title {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	max-width: 220rpx;
}
.item-price {
	font-size: 32upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #fe2525;
	margin: 0 20rpx;
}
.item-price::before {
	content: '￥';
	font-size: 14rpx;
	color: #fe2525;
}
</style>
